const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/js/index.js',
    output:{
        filename:'built.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            /**
             * js兼容性处理：babel-loader
             *  1. 基本js兼容性处理--》@babel/preset-env
             *   问题：只能转换基本语法，如promise等高级语法不能转换
             *  2.全部js兼容性处理===》@bable/polyfill（比较暴力）
             *   使用方法：不用写配置，直接在文件中引入import '@babel/polyfill';
             *   问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入了，代码体积太大
             *  3.需要做兼容性处理的就做：按需加载==》corejs
            */
           {
               test:/\.js$/,
               exclude:/node_modules/,
               loader: 'babel-loader',
               options:{
                //预设：指示babel做什么样的兼容性处理
                presets:[
                    [
                        '@babel/preset-env',
                        {
                            // 按需加载
                            useBuiltIns: 'usage',
                            // 指定core-js版本
                            corejs:{
                                version:3
                            },
                            // 指定兼容性做到哪个版本浏览器
                            targets:{
                                chrome: '60',
                                firefox: '60',
                                ie: '9',
                            }
                        }
                    ]
                ]
                
               }
           }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode:'development'
}